<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-shopping-bag-2"></i> 额度预审 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-popover placement="bottom" width="230" v-model="qrCodeObj.show">
          <el-form ref="form" label-width="0">
            <el-form-item label="">
              <el-input v-model="qrCodeObj.money" placeholder="最高额度 200,000.00"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input type="number" v-model="qrCodeObj.yearL" placeholder="年利率最低 10.2%">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input type="number" v-model="qrCodeObj.monthL" placeholder="日利率最低 0.03%">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="qrCodeObj.show = false">取消</el-button>
            <el-button type="primary" size="mini" @click="qrCodeClick">确定</el-button>
          </div>
          <el-button type="primary" slot="reference" class="handle-del mr10">我的线上分享码
          </el-button>
        </el-popover>

        <el-button type="primary" class="handle-del mr10" @click="qrCodeListClick">我的历史分享码
        </el-button>
        <el-date-picker class="mr10" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                        v-model="query.time">
        </el-date-picker>
        <el-select class="mr10" v-model="query.status" placeholder="请选择状态">
          <el-option label="全部状态" value=""></el-option>
          <el-option label="审核通过" value="2"></el-option>
          <el-option label="审核不通过" value="3"></el-option>
        </el-select>
        <el-input placeholder="请输入产品名称查询" class="handle-input mr10" v-model="query.souVal"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getTableList">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="SelectionChange" v-loading="listLoad">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="seeClick(scope.row.id)">{{scope.row.name}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="quota" label="额度"></el-table-column>
        <el-table-column prop="dayNum" label="利率">
          <template slot-scope="scope">
            <span v-if="scope.row.dayNum">
              日{{scope.row.dayNum}}% 年{{scope.row.yearNum}}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="mobileCreate" label="创建时间" width="200"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '1'">待审核</el-tag>
            <el-tag v-if="scope.row.status == '2'" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status == '3'" type="danger">审核不通过</el-tag>
            <el-tag v-if="scope.row.status == '4'" type="danger">已撤销</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == '1'" type="text" icon="el-icon-check" @click="examineOk(scope.row.id)">审核通过</el-button>
            <el-button v-if="scope.row.status == '1'" type="text" icon="el-icon-close" class="red" @click="examineNo(scope.row.id)">审核不通过</el-button>
            <el-button v-if="scope.row.status != '1' && scope.row.status != '4'" type="text" @click="examinerevoke(scope.row.id)"
                       style="color:#f56c6c;">撤销操作
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="page.totalCount"
                       :pager-count="5" @current-change="PageChange" @prev-click="PageChange" @next-click="PageChange"></el-pagination>
      </div>
    </div>
    <!-- 审核通过 -->
    <el-dialog title="预审额度" :visible.sync="getSet.getSetFlg" width="30%">
      <el-form :model="getSet" :rules="getSetrules" ref="ruleForm">
        <el-form-item label="预审额度" label-width="80px" prop="quota">
          <el-input v-model="getSet.quota" autocomplete="off" placeholder="请输入预审额度，例如：100,000.00"></el-input>
        </el-form-item>
        <el-form-item label="年化利率" label-width="80px" prop="yearNum">
          <el-input type="number" v-model="getSet.yearNum" autocomplete="off" placeholder="请输入年化利率，例如：10.0">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="日利率" label-width="80px" prop="monthNum">
          <el-input v-model="getSet.monthNum" autocomplete="off" placeholder="0.02">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="还款方式" label-width="80px" prop="type">
          <el-checkbox-group v-model="getSet.type">
            <el-checkbox label="先息后本" name="type"></el-checkbox>
            <el-checkbox label="等额本息" name="type"></el-checkbox>
            <el-checkbox label="等本等息" name="type"></el-checkbox>
            <el-checkbox label="月息年本" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="还款期限" label-width="80px" prop="dataTime">
          <el-checkbox-group v-model="getSet.dataTime">
            <el-checkbox label="1个月" name="type"></el-checkbox>
            <el-checkbox label="3个月" name="type"></el-checkbox>
            <el-checkbox label="6个月" name="type"></el-checkbox>
            <el-checkbox label="12个月" name="type"></el-checkbox>
            <el-checkbox label="24个月" name="type"></el-checkbox>
            <el-checkbox label="36个月" name="type"></el-checkbox>
            <el-checkbox label="48个月" name="type"></el-checkbox>
            <el-checkbox label="60个月" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="成功短信内容" label-width="80px" prop="xintext">
          <el-input type="textarea" :rows="3" v-model="getSet.xintext" autocomplete="off" placeholder="请编辑成功短信内容"></el-input>
        </el-form-item>
        <el-form-item label="短信效果" label-width="80px">
          <div style="background:#f2f2f2;">
            【代代网】尊敬的XXX，审核结果：{{getSet.xintext ? getSet.xintext : 'xxxxx'}}
          </div>
        </el-form-item>
        <el-form-item label="提取失败说明" label-width="80px" prop="baitext">
          <el-input type="textarea" :rows="3" v-model="getSet.baitext" autocomplete="off" placeholder="请编辑提取失败说明"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button @click="getSet.getSetFlg = false">取 消</el-button>
          <el-button type="primary" @click="examineOkSub('ruleForm')" :loading="getSet.getSetLoad">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 审核不通过 -->
    <el-dialog title="预审额度不通过原因" :visible.sync="getSetNo.getSetFlg" width="30%">
      <el-form>
        <el-form-item label="不通过短信内容" label-width="80px">
          <el-input type="textarea" :rows="3" v-model="getSetNo.xintext" autocomplete="off" placeholder="请编辑不通过短信内容"></el-input>
        </el-form-item>
        <el-form-item label="短信效果" label-width="80px">
          <div style="background:#f2f2f2;">
            【代代网】尊敬的XXX，审核结果：{{getSetNo.xintext ? getSetNo.xintext : 'xxxxx'}}
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="getSetNo.getSetFlg = false">取 消</el-button>
        <el-button type="primary" @click="examineNoSub" :loading="getSetNo.getSetLoad">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 信息列表 -->
    <el-dialog title="客户信息" :visible.sync="customer.flg" width="80%">
      <el-row class="see_ul" v-loading="seeDataLoad">
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>姓名</span><span>{{seeData.qrUser.name}}</span></p>
              <p class="cardLi"><span>电话</span><span>{{seeData.qrUser.phone}}</span></p>
              <p class="cardLi"><span>性别</span><span>{{seeData.qrUser.gender == 1 ? '男' : seeData.qrUser.gender == 2 ? '女' : ''}}</span></p>
              <p class="cardLi"><span>身份证号</span><span>{{seeData.qrUser.identification}}</span></p>
              <p class="cardLi"><span>所在城市</span><span>{{seeData.qrUser.city ? JSON.parse(seeData.qrUser.city).join('/') : ''}}</span></p>
              <p class="cardLi"><span>出生日期</span><span>{{seeData.qrUser.dateOfBirth}}</span></p>
              <p class="cardLi"><span>家庭住址</span><span>{{seeData.qrUser.familyAddress}}</span></p>
              <p class="cardLi"><span>现居住地址</span><span>{{seeData.qrUser.currentAddress}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>车辆信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>是否有车</span><span>{{seeData.vehicleInfo.isVehicle == 1 ? '有车' : '没有'}}</span></p>
              <p class="cardLi"><span>绿本照片</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.vehicleInfo.greenThisPhoto"
                            :preview-src-list="[seeData.vehicleInfo.greenThisPhoto]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>行驶证照片</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.vehicleInfo.drivingPermitPhoto"
                            :preview-src-list="[seeData.vehicleInfo.drivingPermitPhoto]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>车辆品牌</span><span>{{seeData.vehicleInfo.vehicleBrand}}</span></p>
              <p class="cardLi"><span>车辆类型</span><span>{{seeData.vehicleInfo.vehicleType}}</span></p>
              <p class="cardLi">
                <span>车辆所属城市</span><span>{{seeData.vehicleInfo.cityVehicleOwnership ? JSON.parse(seeData.vehicleInfo.cityVehicleOwnership).join('/') : ''}}</span>
              </p>
              <p class="cardLi"><span>车辆识别代号</span><span>{{seeData.vehicleInfo.vehicleIdentificationNumber}}</span></p>
              <p class="cardLi"><span>发动机号</span><span>{{seeData.vehicleInfo.engineNumber}}</span></p>
              <p class="cardLi"><span>是否按揭</span><span>{{seeData.vehicleInfo.ifMortgage == 1 ? '是' : '否'}}</span></p>
              <p class="cardLi"><span>月付金额</span><span>{{seeData.vehicleInfo.monthlyPaymentAmount}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>房屋信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>是否有房</span><span>{{seeData.tenementInfo.isTenement == 1 ? '有房' : '没有'}}</span></p>
              <p class="cardLi"><span>是否按揭</span><span>{{seeData.tenementInfo.isMortgage == 1 ? '有' : '没有'}}</span></p>
              <p class="cardLi"><span>房屋合同照片</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.tenementInfo.photosHousingContract"
                            :preview-src-list="[seeData.tenementInfo.photosHousingContract]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>合同人姓名</span><span>{{seeData.tenementInfo.obligee}}</span></p>
              <p class="cardLi"><span>不动产照片</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.tenementInfo.realEstatePhoto"
                            :preview-src-list="[seeData.tenementInfo.realEstatePhoto]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>房本姓名</span><span>{{seeData.tenementInfo.roomsName}}</span></p>
              <p class="cardLi"><span>房屋性质</span><span>{{seeData.tenementInfo.houseProperty}}</span></p>
              <p class="cardLi"><span>所在城市</span><span>{{seeData.tenementInfo.city ? JSON.parse(seeData.tenementInfo.city).join('/') : ''}}</span></p>
              <p class="cardLi"><span>房屋地址</span><span>{{seeData.tenementInfo.isLocated}}</span></p>
              <p class="cardLi"><span>不动产单元号</span><span>{{seeData.tenementInfo.realEstateUnit}}</span></p>
              <p class="cardLi"><span>房屋类型</span><span>{{seeData.tenementInfo.housingTypes}}</span></p>
              <p class="cardLi"><span>用途</span><span>{{seeData.tenementInfo.purpose}}</span></p>
              <p class="cardLi"><span>面积</span><span>{{seeData.tenementInfo.proportion}}</span></p>
              <p class="cardLi"><span>房龄</span><span>{{seeData.tenementInfo.tenementAge}}</span></p>
              <p class="cardLi"><span>权利其他状况</span><span>{{seeData.tenementInfo.powerOtherConditions}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>企业融资信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>是否企业融资</span><span>{{seeData.corporateFinanceInfo.isCorporateFinance == 1 ? '是' : '否'}}</span></p>
              <p class="cardLi"><span>营业执照照片</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.corporateFinanceInfo.businessLicensePhoto"
                            :preview-src-list="[seeData.corporateFinanceInfo.businessLicensePhoto]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>公司名称</span><span>{{seeData.corporateFinanceInfo.companyName}}</span></p>
              <p class="cardLi"><span>公司地址</span><span>{{seeData.corporateFinanceInfo.companyAddress}}</span></p>
              <p class="cardLi"><span>公司电话</span><span>{{seeData.corporateFinanceInfo.companyTel}}</span></p>
              <p class="cardLi"><span>企业身份</span><span>{{seeData.corporateFinanceInfo.corporateIdentity == 1 ? '法人' : '股东'}}</span></p>
              <p class="cardLi"><span>持股百分比</span><span>{{seeData.corporateFinanceInfo.percentageShareholding}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>税贷信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>是否税贷</span><span>{{seeData.taxGenerationInfo.isTaxGeneration == 1 ? '是' : '否'}}</span></p>
              <p class="cardLi"><span>年度纳税额</span><span>{{seeData.taxGenerationInfo.annualTaxPayment}}</span></p>
              <p class="cardLi"><span>纳税等级</span><span>{{seeData.taxGenerationInfo.brackets}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>其他信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>打卡工资金额</span><span>{{seeData.elseInfo.clockingSalaryAmount}}</span></p>
              <p class="cardLi"><span>工资发放形式</span><span>{{seeData.elseInfo.issueForm}}</span></p>
              <p class="cardLi"><span>企业性质</span><span>{{seeData.elseInfo.enterpriseProperty}}</span></p>
              <p class="cardLi"><span>单位电话</span><span>{{seeData.elseInfo.workTelephone}}</span></p>
              <p class="cardLi"><span>公积金个缴</span><span>{{seeData.elseInfo.providentFundPayment}}</span></p>
              <p class="cardLi"><span>缴纳时长</span><span>{{seeData.elseInfo.gongPayOften}}</span></p>
              <p class="cardLi"><span>社保基数</span><span>{{seeData.elseInfo.socialBase}}</span></p>
              <p class="cardLi"><span>缴纳时长</span><span>{{seeData.elseInfo.shePayOften}}</span></p>
              <p class="cardLi"><span>支付宝芝麻分</span><span>{{seeData.elseInfo.alipaySesamePoints}}</span></p>
              <p class="cardLi"><span>微粒贷额度</span><span>{{seeData.elseInfo.microparticleCreditLine}}</span></p>
              <p class="cardLi"><span>保单</span>
                <span>
                  <el-image style="width: 20px; height: 20px" :src="seeData.elseInfo.guarantee" :preview-src-list="[seeData.elseInfo.guarantee]">
                  </el-image>
                </span>
              </p>
              <p class="cardLi"><span>单份最高金额</span><span>{{seeData.elseInfo.singlePolicyHighest}}</span></p>
              <p class="cardLi"><span>保单缴费时长</span><span>{{seeData.elseInfo.policyDuration}}</span></p>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>联系人信息</span>
            </div>
            <div class="cardUl">
              <p class="cardLi"><span>直系亲属姓名</span><span>{{seeData.contactInfo.nameImmediateFamily}}</span></p>
              <p class="cardLi"><span>直系亲属关系</span><span>{{seeData.contactInfo.relationOne}}</span></p>
              <p class="cardLi"><span>直系亲属电话</span><span>{{seeData.contactInfo.numberImmediateFamily}}</span></p>
              <p class="cardLi"><span>直系亲属单位名称</span><span>{{seeData.contactInfo.immediateFamilyUnit}}</span></p>
              <el-divider></el-divider>
              <p class="cardLi"><span>其他联系人1姓名</span><span>{{seeData.contactInfo.otherContactsOne}}</span></p>
              <p class="cardLi"><span>其他联系人1关系</span><span>{{seeData.contactInfo.otherContactRelatioOne}}</span></p>
              <p class="cardLi"><span>其他联系人1电话</span><span>{{seeData.contactInfo.otherContactNumbersOne}}</span></p>
              <p class="cardLi"><span>其他联系人1单位名称</span><span>{{seeData.contactInfo.otherContactsOneUnit}}</span></p>
              <el-divider></el-divider>
              <p class="cardLi"><span>其他联系人2姓名</span><span>{{seeData.contactInfo.otherContactsTwo}}</span></p>
              <p class="cardLi"><span>其他联系人2关系</span><span>{{seeData.contactInfo.otherContactRelatioTwo}}</span></p>
              <p class="cardLi"><span>其他联系人2电话</span><span>{{seeData.contactInfo.otherContactNumbersTwo}}</span></p>
              <p class="cardLi"><span>其他联系人2单位名称</span><span>{{seeData.contactInfo.otherContactsTwoUnit}}</span></p>
              <el-divider></el-divider>
              <p class="cardLi"><span>其他联系人3姓名</span><span>{{seeData.contactInfo.otherContactsThree}}</span></p>
              <p class="cardLi"><span>其他联系人3关系</span><span>{{seeData.contactInfo.otherContactRelatioThree}}</span></p>
              <p class="cardLi"><span>其他联系人3电话</span><span>{{seeData.contactInfo.otherContactNumbersThree}}</span></p>
              <p class="cardLi"><span>其他联系人3单位名称</span><span>{{seeData.contactInfo.otherContactsThreeUnit}}</span></p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="customer.flg = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 二维码生成 -->
    <el-dialog title="二维码生成" :visible.sync="qrCodeObj.flg" width="30%" style="text-align:center;">
      <div v-loading="qrCodeObj.load">
        <div class="qrCodeUrl" id="qrCodeUrl" ref="qrCodeUrl"></div>
        <p style="margin-top:15px;">二维码三天有效，注意查看</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qrCodeObj.flg = false">取 消</el-button>
        <el-button type="primary" @click="qrCodeObj.flg = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 历史二维码 -->
    <el-dialog title="历史二维码查询" :visible.sync="qrCodeList.flg" width="60%">
      <div class="handle-box">
        <div style="margin-top: 15px">
          <el-date-picker class="mr10" style="width:40%;" v-model="qrCodeList.time" type="daterange" range-separator="-" start-placeholder="开始日期"
                          end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-input style="width:40%;" v-model="qrCodeList.kw" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="qrCodeListSou">搜索</el-button>
        </div>
      </div>
      <el-table :data="qrCodeList.list" border class="table" style="width: 100%" ref="multipleTable" header-cell-class-name="table-header"
                v-loading="qrCodeList.load">
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="qrUserName" label="姓名"></el-table-column>
        <el-table-column prop="qcQuota" label="预审额度"></el-table-column>
        <el-table-column prop="qrCreateTime" label="创建时间"></el-table-column>
        <el-table-column prop="qrExpireTime" label="有效时长至"></el-table-column>
        <el-table-column prop="fromName" label="二维码" width="120">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click" @show="qrCodeListCha(scope.row.qrUrl,`qrCodeUrl${scope.row.qrId}`)">
              <div class="qrCodeUrl" :id="`qrCodeUrl${scope.row.qrId}`" ref="qrCodeUrl"></div>
              <el-button slot="reference" type="text">查看</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="qrCreateTime" label="操作">
          <template slot-scope="scope">
            <el-button slot="reference" type="text" v-if="scope.row.timeFlg" @click="qrTimeC(scope.row)" :loading="scope.row.timeload">延长有效时长3天
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="qrCodeList.page" :page-size="qrCodeList.limit"
                       :total="qrCodeList.totalCount" :pager-count="5" @current-change="qrCodeListPage" @prev-click="qrCodeListPage"
                       @next-click="qrCodeListPage"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qrCodeList.flg = false">取 消</el-button>
        <el-button type="primary" @click="qrCodeList.flg = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择银行 -->
    <el-dialog title="选择银行" :visible.sync="bank.flg" width="40%" @close="bankCheckOff">
      <div class="handle-box">
        <el-input v-model="bank.kw" placeholder="请输入名称查询" class="mr10" style="width:80%;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="bankSearch">搜索</el-button>
      </div>
      <el-col :span="24" style="margin-bottom:20px;" v-if="bank.checkbank.length > 0">
        <p style="margin-bottom:10px;">选中银行：(最少选中8个)</p>
        <el-tag closable v-for="(item,index) in bank.checkbank" style="margin:0 10px 10px 0;" @close="checkbankListDel(item,index)">{{item.bName}}
        </el-tag>
      </el-col>
      <el-table v-loading="bank.loading" :data="bankTableData" border class="table" style="width: 100%" ref="bankListTable"
                header-cell-class-name="table-header" @selection-change="bankSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="bName" label="银行名称"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-popover placement="right" width="200" trigger="click">
              <el-image style="width: 200px;" :src="scope.row.bLogo" :preview-src-list="[scope.row.bLogo]">
              </el-image>
              <el-button slot="reference" type="text">查看LOGO</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="bank.page" :page-size="bank.limit" :total="bank.totalCount"
                       @current-change="bankPageChange" @prev-click="bankPageChange" @next-click="bankPageChange"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bank.flg = false">取 消</el-button>
        <el-button type="primary" @click="bankSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { qrExamineInit, userEditQuerySub, qrExamineOk, qrExaminerevoke, WaitCustomerQrGuoList, CustomerHomeGetBanklogo, WaitCustomerQrGuoTime, WaitCustomerQrAdd } from '../../../api/index';
import QRCode from 'qrcodejs2';
export default {
  data() {
    return {
      listLoad: false,
      query: {
        page: 1,
        limit: 10,
        souVal: "",
        status: '',
        time: []
      },
      tableData: [],
      page: {
        totalCount: 0,
      },
      seeDataLoad: false,
      seeData: {
        qrUser: {},
        corporateFinanceInfo: {},
        elseInfo: {},
        taxGenerationInfo: {},
        tenementInfo: {},
        vehicleInfo: {},
        contactInfo: {},
      },
      getSet: {
        getSetFlg: false,
        getSetLoad: false,
        quota: '',
        yearNum: '',
        monthNum: '',
        type: [],
        dataTime: [],
        xintext: '',
        baitext: '',
      },
      getSetrules: {
        quota: [{ required: true, message: '请输入预审额度', trigger: 'blur' }],
        yearNum: [{ required: true, message: '请输年化利率', trigger: 'blur' }],
        monthNum: [{ required: true, message: '请输入日利率', trigger: 'blur' }],
        type: [{ type: 'array', required: true, message: '请选择还款方式', trigger: 'change' }],
        dataTime: [{ type: 'array', required: true, message: '请选择还款期限', trigger: 'change' }],
        xintext: [{ required: true, message: '请输入成功短信内容', trigger: 'blur' }],
        baitext: [{ required: true, message: '请输入提取失败说明', trigger: 'blur' }],
      },
      getSetNo: {
        getSetFlg: false,
        getSetLoad: false,
        xintext: '',
      },
      editId: '',
      customer: {
        flg: false,
      },

      qrCodeObj: {
        flg: false,
        load: false,
        img: '',
        show: false,
        money: '',
        yearL: '',
        monthL: '',
      },
      qrCodeList: {
        flg: false,
        load: false,
        list: [],
        page: 1,
        limit: 10,
        time: [],
        totalCount: 0,
        kw: '',
      },
      //选择银行
      bank: {
        flg: false,
        kw: '',
        loading: false,
        page: 1,
        limit: 10,
        totalCount: 0,
        checkbank: [],
      },
      bankTableData: []
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    //获取列表
    getTableList() {
      qrExamineInit({
        page: this.query.page,
        limit: this.page.limit,
        startTime: this.query.time ? this.query.time[0] : '',
        endTime: this.query.time ? this.query.time[1] : '',
        status: this.query.status,
        kw: this.query.souVal
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.recordList;
          this.page.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //审核撤销
    examinerevoke(id) {
      this.$confirm('撤销后该线索将作废不可恢复，确定要撤销该预审操作吗？', '提示', {
        confirmButtonText: '确定撤销',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        qrExaminerevoke({
          userId: id
        }).then(res => {
          if (res.code == 0) {
            this.$message.success("操作成功");
            this.getTableList();
          } else {
            this.$message(res.msg);
          }
        })

      })
    },
    //审核通过
    examineOk(id) {
      if (this.$refs['ruleForm']) {
        this.$refs['ruleForm'].resetFields();
      }
      this.getSet.getSetFlg = true;
      this.editId = id;
    },
    //审核不通过
    examineNo(id) {
      this.getSetNo.getSetFlg = true;
      this.editId = id;
    },
    //提交不通过审核信息
    examineNoSub() {
      this.getSetNo.getSetLoad = true;
      if (this.getSetNo.xintext) {
        qrExamineOk({
          userId: this.editId,
          status: '3',
          auditReason: this.getSetNo.xintext,
        }).then(res => {
          this.getSetNo.getSetFlg = false;
          this.getSetNo.getSetLoad = false;
          if (res.code == 0) {
            this.$message.success("操作成功");
            this.getTableList();
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        this.getSetNo.getSetLoad = false;
        this.$message("请填写完成");
      }
    },
    //提交审核通过信息
    examineOkSub(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.getSet.getSetLoad = true;
          qrExamineOk({
            userId: this.editId,
            status: '2',
            quota: this.getSet.quota,
            dayNum: this.getSet.monthNum,
            yearNum: this.getSet.yearNum,
            returnMethod: this.getSet.type.length > 0 ? this.getSet.type.join(",") : '',
            term: this.getSet.dataTime.length > 0 ? this.getSet.dataTime.join(",") : '',
            auditReason: this.getSet.xintext,
            extractReason: this.getSet.baitext
          }).then(res => {
            this.getSet.getSetFlg = false;
            this.getSet.getSetLoad = false;
            if (res.code == 0) {
              this.$message.success("操作成功");
              this.getTableList();
            } else {
              this.$message(res.msg);
            }
          })
        } else {

        }
      })
    },
    //查看
    seeClick(id) {
      this.customer.flg = true;
      this.seeDataLoad = true;
      userEditQuerySub({
        flag: 'qrUser',
        biId: id
      }).then(res => {
        this.seeDataLoad = false;
        if (res.code == 0) {
          this.seeData = res;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    PageChange(num) {
      this.query.page = num;
      this.getTableList();
    },
    //选中
    SelectionChange() { },

    //线上二维码
    qrCodeClick() {
      if (this.qrCodeObj.money && this.qrCodeObj.yearL && this.qrCodeObj.monthL) {
        this.$confirm('确定按照提示格式输入正确吗？', '确认格式正确', {
          type: 'warning'
        }).then(() => {
          this.bank.flg = true;
          this.bankGetList();
        })
      } else {
        this.$message('请填写完整');
      }
    },
    //生成二维码
    creatQrCode(text, item) {
      new QRCode(item, {
        text: text,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    //历史二维码获取列表
    qrCodeListClick() {
      this.qrCodeList.flg = true;
      this.qrCodeList.list = [];
      this.qrCodeList.load = true;
      WaitCustomerQrGuoList({
        page: this.qrCodeList.page,
        limit: this.qrCodeList.limit,
        startTime: this.qrCodeList.time ? this.qrCodeList.time[0] : '',
        endTime: this.qrCodeList.time ? this.qrCodeList.time[1] : '',
        kw: this.qrCodeList.kw,
      }).then(res => {
        this.qrCodeList.load = false;
        if (res.code == 0) {
          res.recordList.map(item => {
            item.timeload = false;
            if (new Date(item.qrExpireTime).getTime() - new Date().getTime() < 86400000) {
              item.timeFlg = true;
            } else {
              item.timeFlg = false;
            }
          })
          this.qrCodeList.list = res.recordList;
          this.qrCodeList.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //历史二维码 延长使用
    qrTimeC(item) {
      item.timeload = true;
      WaitCustomerQrGuoTime({
        codeId: item.qrId
      }).then(res => {
        item.timeload = false;
        if (res.code == 0) {
          this.$message.success('操作成功');
          this.qrCodeListClick();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //历史二维码获取列表 搜索
    qrCodeListSou() {
      this.qrCodeList.page = 0;
      this.qrCodeListClick();
    },
    //历史二维码获取列表 翻页
    qrCodeListPage(page) {
      this.qrCodeList.page = page;
      this.qrCodeListClick();
    },
    //历史二维码获取列表序号
    tableIndex(index) {
      return (this.qrCodeList.page - 1) * this.qrCodeList.limit + index + 1;
    },
    //查看历史二维码
    qrCodeListCha(url, item) {
      document.getElementById(item).innerHTML = '';
      this.creatQrCode(url, document.getElementById(item));
    },
    //银行获取列表初始化
    bankGetList() {
      this.bank.loading = true;
      CustomerHomeGetBanklogo({
        page: this.bank.page,
        limit: this.bank.limit,
        name: this.bank.kw
      }).then(res => {
        this.bank.loading = false;
        if (res.code == 0) {
          this.bankTableData = res.recordList;
          this.bank.totalCount = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //银行列表点击搜素
    bankSearch() {
      this.bank.page = 1;
      this.bankGetList();
    },
    //银行列表多选
    bankSelectionChange(item) {
      for (var i = 0; i < item.length; i++) {
        if (this.bank.checkbank.length > 0) {
          for (var y = 0; y < this.bank.checkbank.length; y++) {
            if (item[i].id == this.bank.checkbank[y].id) {
              break;
            }
            if (y == this.bank.checkbank.length - 1) {
              this.bank.checkbank.push(item[i]);
            }
          }
        } else {
          this.bank.checkbank.push(item[i]);
        }
      }
    },
    //选择银行关闭
    bankCheckOff() {
      this.bank.checkbank = [];
    },
    //银行列表翻页
    bankPageChange(page) {
      this.bank.page = page;
      this.bankGetList();
    },
    //删除选中的银行
    checkbankListDel(item, index) {
      this.bank.checkbank.splice(index, 1);
      this.$refs.bankListTable.toggleRowSelection(item, false);
    },

    //确定选中银行
    bankSub() {
      if (this.bank.checkbank.length >= 8) {
        this.bank.flg = false;
        let bankIdList = this.bank.checkbank.map(item => {
          return item.id
        })
        this.qrCodeObj.flg = true;
        this.qrCodeObj.load = true;
        WaitCustomerQrAdd({
          quota: this.qrCodeObj.money,
          dayNum: this.qrCodeObj.monthL,
          yearNum: this.qrCodeObj.yearL,
          bankIdList: bankIdList
        }).then(res => {
          this.qrCodeObj.load = false;
          if (res.code == 0) {
            setTimeout(() => {
              document.getElementById('qrCodeUrl').innerHTML = '';
              this.creatQrCode(res.qrCode, document.getElementById('qrCodeUrl'));
            }, 0)
          } else {
            this.$message(res.msg);
          }
        })
      } else {
        this.$message("最少选择8个银行");
      }
    },
  }
};
</script>

<style scoped>
/deep/ :focus {
    outline: 0;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.nameDrawer {
    padding: 30px;
}
.elSelect {
    width: 100%;
}
.upload-demo {
    height: 32px;
}
.heng-border {
    height: 0.5px;
    margin-bottom: 30px;
}
.cardUl {
    line-height: 26px;
    color: #333;
    display: flex;
    flex-wrap: wrap;
}
.box-card {
    margin-bottom: 10px;
}
.cardLi {
    padding: 5px 0;
    width: 30%;
    margin-right: 3.3%;
    display: flex;
    /* justify-content: space-between; */
}
.cardLi span:nth-child(1) {
    width: 136px;
    color: #999;
}
.cardLi span:nth-child(2) {
    flex: 1;
    /* text-align: right; */
}
.fanwentext a {
    margin-right: 10px;
}
.qrCodeUrl >>> img {
    margin: 0 auto;
}
</style>
